<script lang="ts" setup>
import {ref, watch} from "vue"
import {findAllUsageHistory, searchUseComputerHistoryByTimeToTime} from "@/api/computer.js";
import {ElMessage, ElMessageBox} from "element-plus";
const tableData = ref([])
const searchInfo = ref({
  username:'',
  firstTime:'',
  secondTime:''
})

const findHistory = async () => {

  let result = await findAllUsageHistory(searchInfo.value)
  tableData.value = result.date
}
findHistory()
const refresh = ()=>{
  //重置searchInfo的值
  searchInfo.value = {
    username:'',
    firstTime:'',
    secondTime:''
  }
  findHistory()
  ElMessage.success("刷新成功")
}

import {removeUsageHistory} from '@/api/computer'
import {DeleteFilled, Refresh, Search} from "@element-plus/icons-vue";
const deleteButton = async (row) => {
  let result = await removeUsageHistory(row.id)
  console.log(result)
  if (result.code == 200) {
    ElMessage.success("删除成功！")
  }
  findHistory()
}

const timeValue = ref('')
const isNotTime = ref(false)

watch(timeValue, async (newValue, oldValue) => {

  if (newValue == null) {
    //如果清空时间数据后 则再次查询所有信息
    findHistory()
  }

  const formatOptions = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false,
  };
  const formatter = new Intl.DateTimeFormat('zh-CN', formatOptions);

  //先转换为2024/5/24 15:00:00的格式
  const formattedDates = newValue.map(date => formatter.format(date));
  //将2024/5/24改为2024-5-24的格式
  const formatDates = formattedDates.map(dateTime => {
    const [date, time] = dateTime.split(' ')
    const formatDate = date.replace(/\//g, '-')
    return `${formatDate} ${time}`
  });

  searchInfo.value.firstTime = formatDates[0]
  searchInfo.value.secondTime = formatDates[1]
  let result = await findAllUsageHistory(searchInfo.value)
  if (result.date.length == 0) {
    isNotTime.value = true
    ElMessage.info("该时间段没有消费过电脑")
  }else {
    isNotTime.value = false
    ElMessage.success("查询成功")
    tableData.value = result.date
  }

})

const currentRowData = ref()
const beforeDeleteButton = (row)=>{
  dialogVisible.value = true
  currentRowData.value = row
}
const confirmDelete = ()=>{
  dialogVisible.value = false
  deleteButton(currentRowData.value)
}

const dialogVisible = ref(false)

</script>

<template>
  <el-button size="mini" @click="refresh" type="success" plain><el-icon><Refresh/></el-icon>刷新</el-button>
    <el-tooltip
        class="box-item"
        effect="dark"
        content="请选择一个时间范围或者输入用户名"
        placement="bottom"
    >
      <el-button @click="findHistory" type="primary"><el-icon><Search/></el-icon>条件搜索</el-button>
    </el-tooltip>
    <!--        <span>根据时间查询<el-icon><Search/></el-icon></span>-->
    <el-date-picker
        v-model="timeValue"
        type="datetimerange"
        start-placeholder="时间1"
        end-placeholder="时间2"
        format="YYYY-MM-DD HH:mm:ss"
        date-format="YYYY/MM/DD ddd"
        time-format="A hh:mm:ss"
    />
  <el-input v-model="searchInfo.username" placeholder="用户名搜索" style="width: 240px">用户名</el-input>
  <el-table :data="tableData" height="250" style="width: 100%">
    <el-table-column prop="userId" label="用户id" width="180" />
    <el-table-column prop="starttime" label="开始时间" width="180" />
    <el-table-column prop="endtime" label="结束时间" width="180" />
    <el-table-column prop="duration" label="持续时长/h" width="180" />
    <el-table-column prop="cost" label="消费/元" width="180" />
    <el-table-column prop="computerId" label="电脑id" width="180" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
            size="mini"
            type="danger"
            @click="beforeDeleteButton(scope.row)"><el-icon><DeleteFilled/></el-icon>删除记录</el-button>

      </template>
    </el-table-column>
  </el-table>

  <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="500"
  >
    <span>确认要删除该记录吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false" type="success" plain>取消</el-button>
        <el-button type="danger" @click="confirmDelete">
          确认删除
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>